<template>
  <div class="final-score-tab">
    <el-table
      v-loading="loading"
      :data="scores"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="课程名称" min-width="150" resizable>
        <template #default="scope">
          {{ scope.row.courseName || '未知课程' }}
        </template>
      </el-table-column>
      <el-table-column label="学号" min-width="120" resizable>
        <template #default="scope">
          {{ scope.row.studentNumber || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" min-width="100" resizable>
        <template #default="scope">
          {{ scope.row.studentName || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="评分类型" min-width="150" resizable>
        <template #default="scope">
          {{ scope.row.scoreTypeName || '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="最终成绩" min-width="100" resizable>
        <template #default="scope">
          <span :class="getScoreClass(scope.row.score)">
            {{ formatScore(scope.row.score) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120" resizable>
        <template #default="scope">
          <el-button 
            size="small" 
            type="primary" 
            @click="editScore(scope.row)"
          >
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { computed } from 'vue'
import { Edit } from '@element-plus/icons-vue'

export default {
  name: 'FinalScoreTab',
  components: {
    Edit
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    scores: {
      type: Array,
      default: () => []
    },
    teachingMissionName: {
      type: String,
      default: ''
    }
  },
  emits: ['edit-score'],
  setup(props, { emit }) {
    // 编辑成绩
    const editScore = (score) => {
      emit('edit-score', score)
    }
    
    // 格式化成绩显示
    const formatScore = (score) => {
      if (score === null || score === undefined) return '未录入'
      return score
    }
    
    // 获取成绩样式类
    const getScoreClass = (score) => {
      if (score === null || score === undefined) return 'score-empty'
      if (typeof score === 'number') {
        if (score >= 90) return 'score-excellent'
        if (score >= 80) return 'score-good'
        if (score >= 70) return 'score-average'
        if (score >= 60) return 'score-pass'
        return 'score-fail'
      }
      return ''
    }
    
    return {
      editScore,
      formatScore,
      getScoreClass,
      teachingMissionName: props.teachingMissionName
    }
  }
}
</script>

<style scoped>
.score-empty {
  color: #909399;
  font-style: italic;
}

.score-excellent {
  color: #67C23A;
  font-weight: bold;
}

.score-good {
  color: #409EFF;
  font-weight: bold;
}

.score-average {
  color: #E6A23C;
}

.score-pass {
  color: #F56C6C;
}

.score-fail {
  color: #F56C6C;
  font-weight: bold;
}
</style>
